<template>
  <!-- 头部header -->
    <div class="header">
      <img
        @click="handleUserMenu"
        class="user_icon"
        src="../assets/images/user.png"
        alt=""
      />
      <!-- 用户菜单 -->
      <div
        class="user_menu"
        @blur="userMenuVisiable = false"
        :style="{ height: userMenuVisiable ? '50px' : '0px' }"
        ref="userMenuRef"
        tabindex="0"
      >
        <!-- <div
          class="menu_list_wrapper"
          @click="theme = theme == 'default' ? 'dark' : 'default'"
        >
          切换主题
          <icon-sun v-if="theme == 'default'" />
          <icon-moon v-else />
        </div> -->
        <div class="menu_list_wrapper" @click="logout">退出登录</div>
        <div class="menu_list_wrapper" @click="visible = true">修改密码</div>
      </div>
    </div>

    <a-modal :visible="visible" @ok="updatePasswordList" @cancel="visible = false">
      <a-form model="user" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }"> 
        <a-form-item label="旧密码">
          <a-input v-model="user.password" />
        </a-form-item>
        <a-form-item label="新密码">
          <a-input v-model="user.newPassword" />
        </a-form-item>
        <a-form-item label="确认密码">
          <a-input v-model="user.confirmPassword" />
        </a-form-item>
      </a-form>
    </a-modal>
  </template>
  
  <script setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  import { updatePassword } from "../../api/user";
  import { Message } from "@arco-design/web-vue";
  const appTitle = import.meta.env.VITE_APP_TITLE;
  let userMenuVisiable = ref(false);
  let theme = ref("default");
  const router = useRouter();
  const userMenuRef = ref(null);
  const user = ref({
    id:1,
    username:"",
    password: "",
    newPassword: "",
    confirmPassword: ""
  });
  const logout = () => {
    const res = confirm("确定退出登录吗?");
    if (res) {
      localStorage.removeItem("Authorization");
      router.push("/");
    }
  };
  

  const visible = ref(false);
  const updatePasswordList = () => {
    if(user.value.password == user.value.newPassword){
      Message.error("新密码不能与旧密码相同");
      return;
    }
    if(user.value.newPassword != user.value.confirmPassword){
      Message.error("请确认密码是否一样！");
      return;
    }
    const loginData = JSON.parse(localStorage.getItem('loginData')).data
    user.value.username = loginData.username
    updatePassword(user.value).then(res => {
      if (res.code == 200) {
        Message.success("修改密码成功");
        visible.value = false;
        localStorage.removeItem("Authorization");
        router.push("/");
        Message.success("请重新登录");

        
      }
    })
  }
  
  const handleUserMenu = () => {
    userMenuVisiable.value = !userMenuVisiable.value;
    if (userMenuVisiable.value) {
      // 让 userMenu 聚焦
      userMenuRef.value.focus();
    }
  };
  </script>
  
  <style scoped>
  .header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
  }
  .user_menu {
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #fff;
    border-radius: 5px;
    width: 100px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
  }
  .user_icon {
    width: 40px;
    height: 40px;
    margin-left: auto;
  }
  .menu_list_wrapper {
    width: 100%;
    border-bottom: 1px solid #dcdfe6;
    box-sizing: border-box;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 10px;
  }
  .menu_list_wrapper:hover {
    background-color: #f5f7fa;
  }
  </style>